<script setup lang="ts">
import { reactive, ref, watch, computed, effect } from 'vue';

const list = ref([
  {
    id: 1,
    img: '/插画/green.svg',
    title: '300+',
    content: '课程',
  },
  {
    id: 2,
    img: '/插画/purple.svg',
    title: '1000+',
    content: '学生',
  },
  {
    id: 3,
    img: '/插画/red.svg',
    title: '5000+',
    content: '视频',
  },
  {
    id: 4,
    img: '/插画/blue.svg',
    title: '3000+',
    content: '用户',
  },
]);
</script>

<template>
  <div class="container">
    <div class="item" v-for="item in list" :key="item.id">
      <img :src="item.img" alt="" />
      <div class="content">
        <span style="font-weight: bold; font-size: 25px">{{ item.title }}</span>
        <span>{{ item.content }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  margin-top: 100px;
  width: 100%;
  height: 100px;
  @include flex();
  .item {
    @include flex();
    .content {
      margin-left: 20px;
      height: 60px;
      @include flex-column(space-evenly);
    }
  }
}
</style>
